<template>
  <div class="room">
    <!-- 白板 -->
    <div class="baiban_container">
        <baiban></baiban>
    </div>
    <div class="video-box" ref="video-box">
      <video class="video-mine" muted controls ref="video-mine"></video>
      <audio class="audio-mine" muted controls ref="audio-mine"></audio>
    </div>
  </div>
</template>

<script>
import baiban from './baiban.vue'
import socket from "../../utils/socket";

export default {
  components:{
    baiban
  },
  name: "home",
  data() {
    return {
      roomid: "",
      peer: null,
      peerList: {},
      candidate: null,
      localStream: null,
    };
  },
  watch: {
    userList: {
      handler() {},
      deep: true,
    },
  },
  beforeDestroy() {
    for (let k in this.peerList) {
      this.peerList[k].close();
      this.peerList[k] = null;
    }
  },
  methods: {
    getUserMedia() {
      //兼容浏览器的getUserMedia写法
      let myVideo = this.$refs["video-mine"];
      let myAudio = this.$refs["audio-mine"];
      let getUserMedia =
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;
      //获取本地的媒体流，并绑定到一个video标签上输出，并且发送这个媒体流给其他客户端
      return new Promise((resolve, reject) => {
        getUserMedia.call(
          navigator,
          {
            audio: true,
            video: true,
          },
          (stream) => {
            //绑定本地媒体流到video标签用于输出
            myVideo.srcObject = stream;
            myAudio.srcObject = stream;
            this.localStream = stream;
            resolve();
          },
          function (error) {
            reject(error);
            // console.log(error);
            //处理媒体流创建失败错误
          }
        );
      });
    },
    getPeerConnection(v) {
      let videoBox = this.$refs["video-box"];
      let iceServer = {
        iceServers: [
          {
            url: "stun:stun.l.google.com:19302",
          },
        ],
      };
      //兼容浏览器的PeerConnection写法
      let PeerConnection =
        window.RTCPeerConnection ||
        window.webkitRTCPeerConnection ||
        window.mozRTCPeerConnection;
      // 创建
      let peer = new PeerConnection(iceServer);
      //向PeerConnection中加入需要发送的流
      peer.addStream(this.localStream);

      //如果检测到媒体流连接到本地，将其绑定到一个video标签上输出
      const _this = this;
      peer.onaddstream = function (event) {
        // console.log('event-stream', event);
        console.log("#" + v.account, v, "xxxxxxxxxxx");
        let videos = document.getElementById("#" + v.account);
        if (videos) {
          videos.srcObject = event.stream;
        } else {
          let video = document.createElement("video");
          video.controls = true;
          // video.autoplay = "autoplay";
          video.muted = 'muted'
          video.srcObject = event.stream;
          video.id = v.account;

          let audio = document.createElement("audio");
          audio.controls = true;
          // audio.autoplay = "autoplay";
          video.muted = 'muted'
          audio.srcObject = event.stream;
          audio.id = v.account;

          _this.$nextTick(() => {
            videoBox.append(video);
            videoBox.append(audio);
          });
        }
      };
      //发送ICE候选到其他客户端
      peer.onicecandidate = (event) => {
        if (event.candidate) {
          socket.emit("__ice_candidate", {
            candidate: event.candidate,
            roomid: this.$route.params.roomid,
            account: v.account,
          });
        }
      };
      // console.log('v.account', v.account);
      this.peerList[v.account] = peer;
    },
    createOffer(account, peer) {
      setTimeout(() => {
        //发送offer，发送本地session描述
        peer
          .createOffer({
            offerToReceiveAudio: 1,
            offerToReceiveVideo: 1,
          })
          .then((desc) => {
            // console.log('send-offer', desc);
            peer.setLocalDescription(desc, () => {
              socket.emit("offer", {
                sdp: peer.localDescription,
                roomid: this.$route.params.roomid,
                account: account,
              });
            });
          });
      }, 100);
    },
    socketInit() {
      socket.on("offer", (v) => {
        // console.log('take_offer', this.peerList[v.account]);
        this.peerList[v.account] &&
          this.peerList[v.account].setRemoteDescription(
            v.sdp,
            () => {
              this.peerList[v.account].createAnswer().then((desc) => {
                // console.log('send-answer', desc);
                this.peerList[v.account].setLocalDescription(desc, () => {
                  socket.emit("answer", {
                    sdp: this.peerList[v.account].localDescription,
                    roomid: this.$route.params.roomid,
                    account: v.account,
                  });
                });
              });
            },
            () => {
              // console.log(err)
            }
          );
      });
      socket.on("answer", (v) => {
        console.log("take_answer", v.sdp);
        this.peerList[v.account] &&
          this.peerList[v.account].setRemoteDescription(
            v.sdp,
            function () {},
            () => {
              // console.log(err)
            }
          );
      });
      socket.on("__ice_candidate", (v) => {
        // console.log('take_candidate', v.candidate);
        //如果是一个ICE的候选，则将其加入到PeerConnection中
        if (v.candidate) {
          this.peerList[v.account] &&
            this.peerList[v.account].addIceCandidate(v.candidate).catch(
              () => {} // console.log('err', e)
            );
        }
      });
      socket.on("disconnected", (id) => {
        // console.log('disconnected', id);
        let dom = document.getElementById("#" + id);
        if (dom) {
          dom.remove();
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserMedia().then(() => {
        socket.emit("join", {
          roomid: this.$route.params.roomid,
          account: this.$route.params.account,
        });
      });
      this.socketInit();
      socket.on("joined", (data, account) => {
        console.log("joined", data);
        if (data.length > 1) {
          data.forEach((v) => {
            let obj = {};
            let arr = [v.account, this.$route.params.account];
            obj.account = arr.sort().join("-");
            if (
              !this.peerList[obj.account] &&
              v.account !== this.$route.params.account
            ) {
              console.log("obj", obj);
              this.getPeerConnection(obj);
            }
          });
          if (account === this.$route.params.account) {
            // console.log('account', account);
            for (let k in this.peerList) {
              this.createOffer(k, this.peerList[k]);
            }
          }
        }
      });
    });
  },
};
</script>

<style lang="scss">
.room {
  background: #000;
  height: 100%;
  width: 100%;
  position: relative;
//   overflow: hidden;
  .baiban_container{
    border: 1px solid #ffffff;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 150px;
    overflow: hidden;
  }
}
.video-box {
   position: absolute;
   bottom: 0;
   width:100%;
   height: 150px;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: left;
   overflow: auto;
  video {
    width: 200px;
    height: 150px;
    margin-right: 10px;
  }
  audio {
    display: none;
  }
}
</style>
